<template>
    <view class="wrapper">
        <view class="title">请选择你的爱好 (多选)</view>
        
        <!-- 
            1. v-model 绑定的是一个数组 (selectedHobbies)
        -->
        <checkbox-group v-model="selectedHobbies" @change="hobbyChange">
            <label class="checkbox-item" v-for="item in hobbies" :key="item.value">
                <checkbox :value="item.value" />
                <text>{{item.name}}</text>
            </label>
        </checkbox-group>
        
        <view class="result">
            你选择的是：{{selectedHobbies}}
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 1. v-model 绑定的是一个数组
                selectedHobbies: ['coding'], // 默认选中 'coding'
                
                // 2. 选项列表
                hobbies: [
                    { name: '编程', value: 'coding' },
                    { name: '篮球', value: 'basketball' },
                    { name: '音乐', value: 'music' }
                ]
            }
        },
        methods: {
            hobbyChange(e) {
                // e.detail.value 是一个数组，包含了所有被选中的 value
                console.log('爱好已变为：', e.detail.value);
                // 同样，this.selectedHobbies 已经自动更新了
            }
        }
    }
</script>

<style>
.wrapper {
    padding: 15px;
}
.title {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
}
.checkbox-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.checkbox-item text {
    margin-left: 10px;
}
.result {
    margin-top: 20px;
    padding: 10px;
    background-color: #f4f4f4;
}
</style>